<template>
	<view class="login-page">
		<view class="page-bg top-bg">
			<image src="@/static/images/login-top2.png" mode="widthFix"></image>
		</view>
		<view class="login-container">
			<view class="title">
				欢迎回来
			</view>
			<view class="login-form">
				<view class="login-form-item">
					<u--input placeholder="请输入账号" border="surround" shape="circle" v-model="formData.username" fontSize="28rpx" prefixIcon="account" prefixIconStyle="padding:0 10rpx; font-size:42rpx"></u--input>
				</view>
				<view class="login-form-item">
					<u--input type="password" placeholder="请输入密码" border="surround" shape="circle" v-model="formData.password" fontSize="28rpx" prefixIcon="lock" prefixIconStyle="padding:0 10rpx; font-size:42rpx"></u--input>
				</view>
				<view class="login-form-item" v-if="formData.tab == 'register'">
					<u--input type="password" placeholder="确认密码" border="surround" shape="circle" v-model="formData.confirm_password" fontSize="28rpx" prefixIcon="lock" prefixIconStyle="padding:0 10rpx; font-size:42rpx"></u--input>
				</view>
				<view class="login-form-item">
					<u-button type="primary" shape="circle" :text="formData.tab == 'register' ? '注册' : '登录'" @tap="submit"></u-button>
				</view>
			</view>
			<view class="login-links">
				<text class="link active" @tap="formData.tab = 'register'" v-if="formData.tab == 'login'">账号注册</text>
				<text class="link active" @tap="formData.tab = 'login'" v-else>前往登录</text>
				<!-- <text class="link">忘记密码</text> -->
			</view>
		</view>
		<view class="page-bg bottom-bg">
			<image src="@/static/images/login-bottom2.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import { login } from '@/common/api.js'
	
	export default {
		name: 'login',
		data() {
			return {
				// 当前选中的模式
				currentModeIndex: 0,
				formData: {
					keep: true,
					tab: 'login',
					username: '',
					password: '',
				}
			}
		},
		watch: {
			
		},
		onLoad() {
			if (process.env.NODE_ENV == 'development') {
				this.formData.username = '15328532265'
				this.formData.password = '111111'
			}
		},
		methods: {
			submit(){
				if(uni.$u.test.isEmpty(this.formData.username)){
					return this.$toast('请输入账号！')
				}
				if(!uni.$u.test.mobile(this.formData.username)){
					return this.$toast('账号格式错误！')
				}
				if(uni.$u.test.isEmpty(this.formData.password)){
					return this.$toast('请输入密码！')
				}
				if(this.formData.tab == 'register' && this.formData.password != this.formData.confirm_password){
					return this.$toast('两次密码输入不一致！')
				}
				const {keep,tab,username,password} = {...this.formData}
				login({
					keep,
					tab,
					mobile: username,
					password
				}).then((res) => {
					this.$store.commit('setUser', res.userInfo)
					uni.switchTab({
						url: '/pages/home/index'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		position: relative; height: 100vh; z-index: 1;
		.page-bg {
			position: absolute;
			
			&.top-bg { 
				top:0; right:0;
				image { 
					width:600rpx
				}
			}
			
			&.bottom-bg { left:0; bottom: 0; }
		}
		
		.login-container {
			padding-top: 300rpx; padding-left: 40rpx; padding-right: 40rpx;
			.title { font-size: 50rpx; }
			.login-form { 
				margin-top: 100rpx;
				.login-form-item {
					.u-input {
						
					}
					.u-button { 
						/deep/ .u-button__text { text-indent:1em;letter-spacing: 1em;font-weight: bold; }
					}
				}
				.login-form-item + .login-form-item {
					margin-top: 60rpx;
				}
			}
			
			.login-links {
				display: flex; justify-content: center; margin-top: 40rpx;
				.link { 
					color: #aaa; font-size: 26rpx; display: inline-block; margin: 0 20rpx;
					&.active {
						 color: #333;
					}
				 }
			}
		}
	}
</style>